<template>
  <div class="merchant-stat" v-loading.fullscreen.lock="loading">
    <div class="merchant-stat-content">
      <search-form :search="search" @search-data="searchData"></search-form>
      <div class="merchant-stat-data clearfix" v-if="statCountData!==null">
        <div>昨日用户在线数:{{statCountData.yesterDayLoginCount}}</div>
        <div>今日用户在线数:{{statCountData.wechatLoginKeysCount}}</div>
        <div>今日商户在线数:{{statCountData.backLoginKeysCount}}</div>
        <div>商户总数:{{statCountData.allBranchCount}}</div>
        <div>今日新增商户:{{statCountData.newBranchCount}}</div>
      </div>
      <div class="merchant-stat-chart" v-if="merchantList!==null">
        <merchant-chart ref="chart" :merchants="merchantList"></merchant-chart>
      </div>
    </div>
  </div>
</template>

<script>
  import StatisticApi from 'services/statisticApi';

  import timeoutMixin from 'mixins/timeout';

  import SearchForm from './searchForm';
  import MerchantChart from './merchantChart';

  import MerchantStatSearch from 'models/statistic/merchantStatSearch';

  export default {
    mixins: [timeoutMixin],

    data() {
      return {
        loading: false,
        search: new MerchantStatSearch(),
        statCountData: null,
        merchantList: null
      };
    },

    created() {
      this.resetData();
    },

    methods: {
      resetData() {
        this.loading = true;
        Promise.all([
          this.setStatCountData(),
          this.setMerchantList(true)
        ]).then(() => {
          this.boardRunning();
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      setStatCountData() {
        return StatisticApi.getMerchantStatCount().then(statCountData => {
          this.statCountData = statCountData;
          return statCountData;
        });
      },

      setMerchantList(isSearch = false) {
        let search = this.search;
        if (!isSearch) {
          search.resetOldData();
        }

        let code = search.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`statistic.merchantStat.error.${code}`);
          this.$message(msg);
          return Promise.reject();
        }

        return StatisticApi.getMerchantStatData(search).then(merchantList => {
          if (isSearch) {
            search.setOldData();
          }

          this.merchantList = merchantList;
          return merchantList;
        });
      },

      searchData() {
        this.loading = true;
        this.clearTimeoutList(1);
        this.setMerchantList(true).then(() => {
          this.loading = false;
          this.$refs['chart'].resetMarker(true);
          this.merchantDataRunning();
        }).catch(() => {
          this.loading = false;
        });
      },

      boardRunning() {
        this.clearTimeoutList();
        this.statCountRunning();
        this.merchantDataRunning();
      },

      statCountRunning() {
        let timeout = setTimeout(() => {
          this.setStatCountData().then(() => {
            this.timeoutList[0] = null;
            this.statCountRunning();
          });
        }, 10 * 60 * 1000);
        this.timeoutList[0] = timeout;
      },

      merchantDataRunning() {
        let timeout = setTimeout(() => {
          this.setMerchantList().then(() => {
            this.$refs['chart'].resetMarker();
            this.timeoutList[1] = null;
            this.merchantDataRunning();
          });
        }, 3600 * 1000);
        this.timeoutList[1] = timeout;
      }
    },

    components: {
      SearchForm,
      MerchantChart
    }
  };

</script>

<style lang="scss" scoped>
  .merchant-stat {
    padding: 10px 10px 5px;
    height: calc(100% - 15px);
    background: #f1f3f4;
    overflow: auto;

    .merchant-stat-content {
      height: 100%;
      min-width: 700px;
      min-height: 350px;

      .merchant-stat-data {
        >div {
          float: left;
          margin-right: 10px;
          margin-bottom: 10px;

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .merchant-stat-chart {
        height: calc(100% - 77px);
      }
    }
  }

  @media screen and(max-width:1163px) {
    .merchant-stat .merchant-stat-content .merchant-stat-chart {
      height: calc(100% - 123px);
    }
  }

</style>
